import React from 'react';

import styles from './index.less';

import MyHeaders from '../../components/myHeader'

import { NavLink, useLocation } from 'umi';

import { Layout, Menu, Breadcrumb } from 'antd';
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
  SlidersOutlined,
  ProjectOutlined,
  ScheduleOutlined,
} from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

const _layout: React.FC = (props) => {
  return (
    <Layout style={{ width: '100%', height: '100%' }}>
      <Header className="header" style={{ background: '#fff',padding:'0' }}>
        <MyHeaders></MyHeaders>
        </Header>
      <Content style={{ height: '100%' }}>
        {/* <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>List</Breadcrumb.Item>
        <Breadcrumb.Item>App</Breadcrumb.Item>
      </Breadcrumb> */}
        <Layout className="site-layout-background" style={{ height: '100%' }}>
          <Sider
            className="site-layout-background"
            width={200}
            style={{ height: '100%' }}
          >
            <Menu
              mode="inline"
              // defaultSelectedKeys={['1']}
              // defaultOpenKeys={['sub1']}
              theme="dark"
              style={{
                height: '100%',
                color: 'rgba(305, 255, 255, 0.65)',
                background: '#232A41',
              }}
            >
              <SubMenu
                key="sub1"
                icon={<SlidersOutlined />}
                title="试题管理"
                style={{ background: '#232A41' }}
              >
                <Menu.Item
                  key="1"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  <NavLink to='/main/addQuestion'>添加试题</NavLink> 
                </Menu.Item>
                <Menu.Item
                  key="2"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  <NavLink to='/main/questionsType'>试题分类</NavLink> 
                </Menu.Item>
                <Menu.Item
                  key="3"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                   <NavLink to='/main/watchQuestions'>查看试题</NavLink> 
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub2"
                icon={<UserOutlined />}
                title="用户管理"
                style={{ background: '#232A41' }}
              >
                <Menu.Item
                  key="4"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  <NavLink to="/main/addUser">添加用户</NavLink>
                </Menu.Item>
                <Menu.Item
                  key="5"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  <NavLink to="/main/showUser">用户展示</NavLink>
                </Menu.Item>
              </SubMenu>
              <SubMenu
                key="sub3"
                icon={<ScheduleOutlined />}
                title="考试管理"
                style={{ background: '#232A41' }}
              >
                <Menu.Item
                  key="6"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  添加考试
                </Menu.Item>
                <Menu.Item
                  key="7"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  试卷列表
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub4" icon={<ProjectOutlined />} title="班级管理">
                <Menu.Item
                  key="8"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  <NavLink to="/main/grade">班级管理</NavLink>
                </Menu.Item>
                <Menu.Item
                  key="9"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  <NavLink to="/main/room">教室管理</NavLink>
                </Menu.Item>
                <Menu.Item
                  key="10"
                  style={{
                    background: '#232A41',
                    margin: '0',
                    boxShadow: 'inset 30px 0px 15px #1E2339',
                  }}
                >
                  <NavLink to="/main/student">学生管理</NavLink>
                </Menu.Item>
              </SubMenu>
              <SubMenu key="sub5" icon={<ProjectOutlined />} title="阅卷管理">
                {/* box-shadow:阴影水平偏移值（可取正负值）； 阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色； */}
                <Menu.Item key="11" style={{ background: '#232A41', margin: '0', boxShadow: 'inset 30px 0px 15px #1E2339' }}><NavLink to='/main/classlist'>待批班级</NavLink></Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Content style={{ padding: '0 24px', height: '100%' }}>
            {props.children}
          </Content>
        </Layout>
      </Content>
      {/* <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> */}
    </Layout>
  );
};
export default _layout;
